<template>
    <div class="device-monitoring-chart">
        <div class="days-select-button">
            <van-button
                plain
                size="small"
                class="list-header-btn"
                :class="{ selected: yesterdaySelect }"
                color="rgba($color: #ffffff, $alpha: 0.8)"
                @click="SelectYesterday"
            >
                {{ $st("yesterday") }}
            </van-button>
            <van-button
                plain
                size="small"
                class="list-header-btn"
                :class="{ selected: SevendaysSelect }"
                color="rgba($color: #ffffff, $alpha: 0.8)"
                @click="SelectSevendays"
            >
                {{ $st("wp_Last_7_days") }}
            </van-button>
            <van-button
                plain
                size="small"
                class="list-header-btn"
                :class="{ selected: ThirtydaysSelect }"
                color="rgba($color: #ffffff, $alpha: 0.8)"
                @click="SelectThirtydays"
            >
                {{ $st("wp_Last_30_days") }}
            </van-button>
        </div>
        <div class="dev-eff-stati">
            <div class="dev-eff-stati-buttonpanel">
            </div>
            <div
                class="dev-eff-stati-chart"
                id="workTimeCountChart"
                ref="workTimeCountChart"></div>
            <div
                class="dev-eff-stati-chart"
                id="effLineChart"
                ref="effLineChart"></div>
        </div>
    </div>
</template>

<script>
import BarChartOptions from '../options/BarChartOptions.js';
import LineChartOptions from '../options/LineChartOptions.js';
import { apiService } from '@/api/apiService.js';
import moment from 'moment';
import _ from 'lodash';
import * as echart from 'echarts';
// eslint-disable-next-line no-unused-vars
import { getMaintainctrlStatistic } from '@/api/server';

let DeviceEffChart = null;
let DeviceTimeCountChart = null;

export default {
    components: {},
    props: {
        uuid: String,
        dialogshow: Boolean
    },
    data () {
        return {
            realStartTime: '',
            totalDays: 7,
            allData: {},
            LineXData: [],
            UtlizationLineData: [],
            OEELineData: [],
            RunningBarData: [],
            IdelBarData: [],
            EstopBarData: [],
            OfflineBarData: [],
            loading: false,
            dateOption: 2,
            customDuration: ['', ''],
            device_eff_chart: null,
            yesterdaySelect: false,
            SevendaysSelect: true,
            ThirtydaysSelect: false
        };
    },

    activated () {
        this.$nextTick(() => {
            this.initChart();
            this.onChange();
            this.delay_resize = _.debounce(this.resize, 200);
            window.addEventListener('resize', this.delay_resize);
            this.SevendaysSelect = true;
            this.yesterdaySelect = false;
            this.ThirtydaysSelect = false;
        });
    },
    deactivated () {
        window.removeEventListener('resize', this.delay_resize);
        DeviceEffChart && DeviceEffChart.dispose();
        DeviceTimeCountChart && DeviceTimeCountChart.dispose();
    },
    watch: {
        dialogshow () {
            if (this.dialogshow === true) {
                this.dateOption = 2;
                this.onChange();
            }
        }
    },
    methods: {
        SelectYesterday () {
            this.yesterdaySelect = true;
            this.SevendaysSelect = false;
            this.ThirtydaysSelect = false;
            const starttime = moment()
                .startOf('day')
                .subtract(1, 'days')
                .format('YYYY-MM-DD');
            const endtime = moment()
                .endOf('day')
                .subtract(1, 'days')
                .format('YYYY-MM-DD');
            this.customDuration = [starttime, endtime];
            this.getData(starttime, endtime);
            this.totalDays = 1;
        },
        SelectSevendays () {
            this.SevendaysSelect = true;
            this.yesterdaySelect = false;
            this.ThirtydaysSelect = false;
            const starttime = moment()
                .startOf('day')
                .subtract(7, 'days')
                .format('YYYY-MM-DD');
            const endtime = moment()
                .endOf('day')
                .subtract(1, 'days')
                .format('YYYY-MM-DD');
            this.customDuration = [starttime, endtime];
            this.getData(starttime, endtime);
            this.totalDays = 7;
        },
        SelectThirtydays () {
            this.ThirtydaysSelect = true;
            this.yesterdaySelect = false;
            this.SevendaysSelect = false;
            const starttime = moment()
                .startOf('day')
                .subtract(30, 'days')
                .format('YYYY-MM-DD');
            const endtime = moment()
                .endOf('day')
                .subtract(1, 'days')
                .format('YYYY-MM-DD');
            this.customDuration = [starttime, endtime];
            this.getData(starttime, endtime);
            this.totalDays = 30;
        },
        resize () {
            if (DeviceEffChart !== null) {
                DeviceEffChart.resize();
            }
            if (DeviceTimeCountChart !== null) {
                DeviceTimeCountChart.resize();
            }
        },
        initChart () {
            if (DeviceEffChart) {
                DeviceEffChart.dispose();
                DeviceEffChart = null;
            }
            if (DeviceTimeCountChart) {
                DeviceTimeCountChart.dispose();
                DeviceTimeCountChart = null;
            }
            if (!this.$refs.effLineChart || !this.$refs.workTimeCountChart) {
                return;
            }
            DeviceEffChart = echart.init(this.$refs.effLineChart);
            DeviceTimeCountChart = echart.init(this.$refs.workTimeCountChart);
        },
        renderChart (data) {
            if (!DeviceEffChart || !DeviceTimeCountChart) {
                return;
            }
            this.InitData();
            DeviceEffChart.setOption(LineChartOptions(this.LineXData, this.UtlizationLineData, this.OEELineData));
            DeviceTimeCountChart.setOption(BarChartOptions(this.LineXData, this.RunningBarData, this.IdelBarData, this.EstopBarData, this.OfflineBarData));
        },
        getData (starttime, endtime) {
            this.realStartTime = starttime;
            // TODO 调用后端方法:从后端获取统计信息
            const that = this;
            apiService({
                api: getMaintainctrlStatistic,
                param: {
                    uuid: this.uuid,
                    starttime: starttime,
                    endtime: endtime
                },
                success: (data) => {
                    if (data.value) {
                        this.allData = data.value;
                        that.renderChart();
                    }
                },
                end: () => {
                    that.loading = false;
                }
            });
        },
        getTodayData () {
            const starttime = moment().startOf('day').format('YYYY-MM-DD');
            const endtime = moment().endOf('day').format('YYYY-MM-DD');
            this.getData(starttime, endtime);
        },
        onChange () {
            this.loading = true;
            switch (this.dateOption) {
            case 0:
                this.getTodayData();
                break;
            case 1:
                {
                    const starttime = moment()
                        .startOf('day')
                        .subtract(1, 'days')
                        .format('YYYY-MM-DD');
                    const endtime = moment()
                        .endOf('day')
                        .subtract(1, 'days')
                        .format('YYYY-MM-DD');
                    this.customDuration = [starttime, endtime];
                    this.getData(starttime, endtime);
                    this.totalDays = 1;
                }
                break;
            case 2:
                {
                    const starttime = moment()
                        .startOf('day')
                        .subtract(7, 'days')
                        .format('YYYY-MM-DD');
                    const endtime = moment()
                        .endOf('day')
                        .subtract(1, 'days')
                        .format('YYYY-MM-DD');
                    this.customDuration = [starttime, endtime];
                    this.getData(starttime, endtime);
                    this.totalDays = 7;
                }
                break;
            case 3:
                {
                    const starttime = moment()
                        .startOf('day')
                        .subtract(30, 'days')
                        .format('YYYY-MM-DD');
                    const endtime = moment()
                        .endOf('day')
                        .subtract(1, 'days')
                        .format('YYYY-MM-DD');
                    this.customDuration = [starttime, endtime];
                    this.getData(starttime, endtime);
                    this.totalDays = 30;
                }
                break;
            }
        },
        InitData () {
            this.LineXData = [];
            this.UtlizationLineData = [];
            this.OEELineData = [];
            this.RunningBarData = [];
            this.IdelBarData = [];
            this.EstopBarData = [];
            this.OfflineBarData = [];
            for (let i = 0; i < this.totalDays; i++) {
                this.LineXData.push(moment(this.realStartTime).add(i, 'days').format('YYYY-MM-DD'));
                // 初始化开机率数据
                if (this.allData.utilization[moment(this.realStartTime).add(i, 'days').format('YYYY-MM-DD')] !== undefined) {
                    this.UtlizationLineData.push(this.allData.utilization[moment(this.realStartTime).add(i, 'days').format('YYYY-MM-DD')].toFixed(0));
                } else {
                    this.UtlizationLineData.push('');
                }
                // 初始化OEE
                if (this.allData.OEE[moment(this.realStartTime).add(i, 'days').format('YYYY-MM-DD')] !== undefined) {
                    this.OEELineData.push(this.allData.OEE[moment(this.realStartTime).add(i, 'days').format('YYYY-MM-DD')].toFixed(0));
                } else {
                    this.OEELineData.push('');
                }
                // 初始化柱状图
                // 运行中
                if (this.allData.Running[moment(this.realStartTime).add(i, 'days').format('YYYY-MM-DD')] !== undefined) {
                    this.RunningBarData.push((this.allData.Running[moment(this.realStartTime).add(i, 'days').format('YYYY-MM-DD')] / 3600).toFixed(2));
                } else {
                    this.RunningBarData.push('');
                }
                // 空闲
                if (this.allData.Idle[moment(this.realStartTime).add(i, 'days').format('YYYY-MM-DD')] !== undefined) {
                    this.IdelBarData.push((this.allData.Idle[moment(this.realStartTime).add(i, 'days').format('YYYY-MM-DD')] / 3600).toFixed(2));
                } else {
                    this.IdelBarData.push('');
                }
                // 紧停
                if (this.allData.Estop[moment(this.realStartTime).add(i, 'days').format('YYYY-MM-DD')] !== undefined) {
                    this.EstopBarData.push((this.allData.Estop[moment(this.realStartTime).add(i, 'days').format('YYYY-MM-DD')] / 3600).toFixed(2));
                } else {
                    this.EstopBarData.push('');
                }
                // 离线
                if (this.allData.Offline[moment(this.realStartTime).add(i, 'days').format('YYYY-MM-DD')] !== undefined) {
                    this.OfflineBarData.push((this.allData.Offline[moment(this.realStartTime).add(i, 'days').format('YYYY-MM-DD')] / 3600).toFixed(2));
                } else {
                    this.OfflineBarData.push('');
                }
            };
        }
    }
};
</script>

<style lang='scss' scoped>
.device-monitoring-chart{
    .days-select-button{
        margin-top:15px;
        display: flex;
        justify-content:flex-start;
          align-items: center;
          z-index:9;
        .list-header-btn {
                height: 25px;
                width: 90px;
                background-color: #F0F0F0;
                // color: rgba($color: #ffffff, $alpha: 0.8);
                // border-color: rgba($color: #ffffff, $alpha: 0.8);
                border-radius: 4px;
                font-size: 13px;
                margin-left: 15px;
                color:black
            }
            .selected {
                background-color: #DBEEFF;
                border: 1px solid #1890FF;
                color:#1890FF;
            }
    }
    .dev-eff-stati-chart {
    padding-left:15px;
    padding-right:15px;
    width: 90%;
    height: 330px;
    }
}
</style>
